<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>content and template</title>
		<style type="text/css">
			.shadowhost_content1,.shadowhost2_content1{
				font-weight: bold;
				color: cadetblue;
			}
			.shadowhost_content2,.shadowhost2_content2{
				font-style: italic;
				color: orange;
			}
		</style>
	</head>

	<body>
		<p>content and template</p>
		<div class="shadowhost">
			shadowhost
			<span class="shadowhost_content1">唱歌</span>
			<span class="shadowhost_content2">跳舞</span>
		</div>
		<!-- S 模板标签 template -->
		<template class="template">
			<p style="font-size: 40px;">你<content select=".shadowhost_content1"></content>！，我<content select=".shadowhost_content2"></content>！</p>
		</template>
		<!-- E 模板标签 template -->
		<script>
			var shadowHost = document.querySelector('.shadowhost');
			var shadowRoot = shadowHost.createShadowRoot();
			var template = document.querySelector('.template');
			// template.content会返回一个文档片段，可以理解为另外一个document。
			// 利用document.importNode获取节点，true表示深度克隆。
			shadowRoot.appendChild(document.importNode(template.content, true));
		</script>
				<div class="shadowhost2">
			shadowhost
			<span class="shadowhost2_content1">唱歌</span>
			<span class="shadowhost2_content2">跳舞</span>
		</div>
		<!-- S 模板标签 template -->
		<template class="template2">
			<p style="font-size: 40px;">
				<!--select="*" 贪心插入点（Greedy Insertion Points）-->
				你<content select="*"></content>！，
				我<content select=".shadowhost2_content2"></content>！
			</p>
		</template>
		<!-- E 模板标签 template -->
		<script>
			var shadowHost = document.querySelector('.shadowhost2');
			var shadowRoot = shadowHost.createShadowRoot();
			var template = document.querySelector('.template2');
			// template.content会返回一个文档片段，可以理解为另外一个document。
			// 利用document.importNode获取节点，true表示深度克隆。
			shadowRoot.appendChild(document.importNode(template.content, true));
		</script>
	</body>

</html>